<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- :to="{ path: '/' }" -->
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增采购入库单</el-breadcrumb-item>
      <el-breadcrumb-item>确认采购入库单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="title">
      <span>确认采购入库单</span>
    </div>
    <div class="table">
      <ul>
        <li>采购入库编号：{{ content.purchaseOrderNo }}</li>
        <li>制单人：{{ content.createdName }}</li>
        <li>制单时间：{{ $moment(content.createdTime) }}</li>
      </ul>
      <el-table :data="addPurchaseInOrderDtoList">
        <el-table-column label="序号" type="index" width="55"></el-table-column>

        <el-table-column label="供应商">
          <template slot-scope="scope">
            <span>{{ scope.row.supplierName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建人" width="120px; ">
          <template slot-scope="scope">
            <span>{{ scope.row.createdName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="采购部门">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseOrgName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="采购仓库" width="120px;">
          <template slot-scope="scope">
            <p>
              <span v-for="items in scope.row.depotBaseDtoList" :key="items.id"
                >{{ items.purchaseDepotName }}（{{
                  items.depotQuantity
                }}）</span
              >
            </p>
          </template>
        </el-table-column>

        <el-table-column label="采购商品" width="140px;">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseProdName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.purchaseProdType == 1">商品</span>
            <span v-else>赠品</span>
          </template>
        </el-table-column>

        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img
              v-if="scope.row.purchaseProdImage"
              style="width: 50px; height: 50px"
              :src="ImgHttps + scope.row.purchaseProdImage.split(',')[0]"
              alt=""
            />
            <span v-else>/</span>
          </template>
        </el-table-column>

        <el-table-column label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseProdBrandName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseProdSpecificationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单价">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseProdPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量">
          <template slot-scope="scope">
            <span>{{ scope.row.inDepotQuantity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="未入库数量" width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.notInDepotQuantity }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <p style="height: 45px"></p>
    <div class="botton">
      <p>总数量：{{ end.number }}</p>
      <p>总金额：{{ end.totalPrice }}</p>
      <p>未入库数：{{ end.notInDepotQuantity }}</p>
      <el-button size="mini" @click="cancelEvent">取消</el-button>
      <el-button type="primary" size="mini" @click="submitEvent"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addPurchaseInOrderDtoList: "",
      content: "",
      end: {
        number: 0,
        totalPrice: 0,
        notInDepotQuantity: 0,
      },
    };
  },
  created() {
    this.addPurchaseInOrderDtoList = JSON.parse(
      this.$route.query.addPurchaseInOrderDtoList
    );
    this.content = JSON.parse(this.$route.query.content);
    //   console.log(this.content);
    for (let i in this.addPurchaseInOrderDtoList) {
      this.end.number +=
        this.addPurchaseInOrderDtoList[i].inDepotQuantity +
        this.addPurchaseInOrderDtoList[i].notInDepotQuantity;
      (this.end.totalPrice += this.addPurchaseInOrderDtoList[i].total),
        (this.end.notInDepotQuantity += this.addPurchaseInOrderDtoList[
          i
        ].notInDepotQuantity);
    }
  },
  methods: {
    cancelEvent() {
      this.$router.replace({
        name: "newStock",
        query: {
          purchaseOrderNo: this.content.purchaseOrderNo,
        },
      });
    },
    submitEvent() {
      if (this.$route.query.test) {
        this.axios.post("order/v1/purchase/in/order/reopen", {
          request: {
            oldPurchaseInOrderNo: this.$route.query.test,
            purchaseOrderNo: this.content.purchaseOrderNo,
            addPurchaseInOrderDtoList: this.addPurchaseInOrderDtoList,
            purchaseInOrderNo: this.content.purchaseInOrderNo, //采购入库订单号
            comment: this.$route.query.textarea,
          },
        }).then((res) => {
            if (res.code == 0) {
              this.$message.success("添加成功!");
                this.$router.push({ name: "purchasingAddList" });
            } else {
              this.$message.error(res.message);
            }
          });;
      } else {
        this.axios
          .post("/order/v1/purchase/in/order/add", {
            request: {
              purchaseOrderNo: this.content.purchaseOrderNo,
              addPurchaseInOrderDtoList: this.addPurchaseInOrderDtoList,
              purchaseInOrderNo: this.content.purchaseInOrderNo, //采购入库订单号
              comment: this.$route.query.textarea,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("添加成功!");
                this.$router.push({ name: "purchasingAddList" });
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.container {
  .title {
    background: #fff;
    padding: 10px 10px;
    margin-top: 20px;
    border-bottom: 1px solid #e3e7ec;
    span {
      font-size: 15px;
    }
  }
  .table {
    background: #fff;
    ul {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        font-size: 15px;
        color: #7d7d7d;
      }
    }
  }
  .botton {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    background: #fff;
    p {
      font-size: 15px;
      margin-right: 10px;
    }
    .el-button {
      margin: 0 20px;
    }
  }
}
/deep/.el-table .cell {
  color: #333;
}
</style>